<strong><!doctype html>
</strong><html>
    <head>
        <!-- https://www.npmjs.com/package/online7356v1 -->
        <script src="https://unpkg.com/@tensorflow/tfjs"></script>
        <script src="https://unpkg.com/@tensorflow-models/mobilenet"> </script>
        <meta charset="utf-8">
        <title>Canvas</title>
        <style type="text/css">
            body {
                margin: 0px;
                padding: 0px;
            }
            #canvas {
                margin: 0px;
                padding: 0px;
                border: 1px solid #010100;
            }
            .button{
                background-color: #4CAF50;
                border: none;
                color: white;
                padding: 15px 32px;
                text-align: center;
                display: inline-block;
                font-size: 16px;
                cursor: pointer;
            }
            .button:active {
            background-color: #3e8e41;
            box-shadow: 0 5px #666;
            transform: translateY(4px);
            }
            /* var myweith = 400; */
        </style>
    </head>
    <body>
        <canvas id="canvas" width="400" height="400">当前浏览器不支持canvas</canvas>
        <!-- <script type="text/javascript" src="utils.js"></script>
        <script type="text/javascript" src="arrow.js"></script> -->
        <script type="text/javascript">
            window.onload=function(){
                var canvas=document.getElementById("canvas");
                var context=canvas.getContext("2d"); 
                // var stroke_num = 0;
                /*var mouse=utils.captureMousePosition(canvas); */ 
                var x_b = 0, y_b = 0;// last point of x and y
                var all_stroke = new Array();
                var astroke = new Array();
                var all_time = new Array();
                var a_time = new Array(); //单个笔画每个点的时间戳

                 //加入mousedown监听事件。在用户鼠标按下后開始画线。并注冊mousemove事件
                canvas.addEventListener("mousedown",function(event){ 
                    context.beginPath();
                    context.moveTo(event.clientX, event.clientY);
                    // begin_time = (new Date()).valueOf();
                    //alert("-------------")
                    canvas.addEventListener("mousemove",onMouseMove,false);
                },false);
 
                 //在鼠标移动时划线 document.getElementById("demo").innerHTML=Date();
                function onMouseMove(event){
                    context.lineTo(event.clientX,event.clientY);
                    
                    filtrationv1(event.clientX,event.clientY);
                    context.stroke();
                };
                function filtrationv1(x,y,door=3/400*400){   // door=3 pix in chrome while canvas's width="400"
                    if(all_time.length==0 && a_time.length==0){
                        begin_time = (new Date()).valueOf();
                    }
                    dis = Math.sqrt((x_b-x)*(x_b-x) + (x_b-x)*(x_b-x));
                    // Tdis
                    // Tcos
                    if(dis > door){
                        a_time[a_time.length] = ((new Date()).valueOf() - begin_time)/100.0;
                        astroke[astroke.length] = [x,y];

                        console.log('dis', dis);
                        x_b = x;
                        y_b = y;
                    }
                    // else{
                    //     console.log('p');
                    // }
                };

                // function filter_distance(x,y,x_b,y_b,door){
                //     dis = Math.sqrt((x_b-x)*(x_b-x) + (x_b-x)*(x_b-x));
                // };

                //在鼠标按键松开后，注销鼠标移动事件
                canvas.addEventListener("mouseup",function(event){
                    canvas.removeEventListener("mousemove",onMouseMove,false);
                    console.log('x',event.clientX,'y',event.clientY+ "<br>",
                                'astroke length ' + astroke.length + "<br>",
                                'all_stroke length,' , all_stroke.length);
                    console.log('mouse up');
                    all_stroke[all_stroke.length] = astroke.concat();
                    all_time[all_time.length] = a_time.concat();
                    document.getElementById("str_num").innerHTML='笔画数：' + all_stroke.length;
                    astroke.length = 0;// clean a stroke
                    a_time.length =0;
                    console.log('all_stroke',all_stroke);
                    console.log('all_time',all_time)
                    // stroke_num  = stroke_num+1;
                },false);
            } // window.onload function end
        </script>
        <button  class="button" onclick="getElementById('time').innerHTML=Date()">开始识别</button>
        <p id="time"></p>
        <p id="str_num"></p>

    </body>
 </html>